<template>
  <div ref="container" @scroll="handleScroll" style="height: 300px; overflow: auto; position: relative; border: 1px solid black;">
    <div :style="{ height: totalHeight + 'px', position: 'relative' }">
      <div v-for="(item, index) in visibleData" :key="index" :style="getItemStyle(index)">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    },
    itemHeight: {
      type: Number,
      default: 30
    },
    bufferSize: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      startIndex: 0,
      endIndex: 20
    };
  },
  computed: {
    totalHeight() {
      return this.data.length * this.itemHeight;
    },
    visibleData() {
      const start = Math.max(0, this.startIndex - this.bufferSize);
      const end = Math.min(this.data.length, this.endIndex + this.bufferSize);
      return this.data.slice(start, end);
    }
  },
  methods: {
    handleScroll() {
      const container = this.$refs.container;
      const scrollTop = container.scrollTop;
      this.startIndex = Math.floor(scrollTop / this.itemHeight);
      this.endIndex = Math.min(this.startIndex + 20, this.data.length);
    },
    getItemStyle(index) {
      const actualIndex = this.startIndex - this.bufferSize + index;
      return {
        position: 'absolute',
        top: `${actualIndex * this.itemHeight}px`,
        width: '100%'
      };
    }
  },
  mounted() {
    this.handleScroll(); 
  }
};
</script>
